/**
 * 步骤指示器组件
 */

import React from 'react';

interface StepIndicatorProps {
  currentStep: number;
  onStepClick?: (step: number) => void;
  className?: string;
}

// 步骤配置
export const stepConfig = [
  {
    id: 1,
    title: '上传文件',
    description: '上传PDF格式的安全评估指南或业务系统资料',
    icon: '📁',
    color: 'text-blue-600'
  },
  {
    id: 2,
    title: 'AI解析调整',
    description: '查看AI解析结果，使用自然语言指令进行智能调整',
    icon: '🤖',
    color: 'text-green-600'
  },
  {
    id: 3,
    title: '导出文档',
    description: '选择导出格式，生成最终的证明材料清单文档',
    icon: '📤',
    color: 'text-orange-600'
  }
];


const StepIndicator: React.FC<StepIndicatorProps> = ({
  currentStep,
  onStepClick,
  className = ''
}) => {
  const isStepCompleted = (stepId: number) => stepId < currentStep;
  const isStepCurrent = (stepId: number) => stepId === currentStep;
  const isStepClickable = (stepId: number) => stepId <= currentStep || isStepCompleted(stepId);

  return (
    <div className={`flex items-center justify-between w-full ${className}`}>
      {stepConfig.map((step, index) => (
        <React.Fragment key={step.id}>
          {/* 步骤项 */}
          <div className="flex flex-col items-center">
            <button
              onClick={() => isStepClickable(step.id) && onStepClick?.(step.id)}
              disabled={!isStepClickable(step.id)}
              className={`
                relative flex items-center justify-center w-8 h-8 rounded-full border transition-all duration-200
                ${isStepCompleted(step.id)
                  ? 'bg-primary border-primary text-primary-foreground'
                  : isStepCurrent(step.id)
                  ? 'bg-white border-primary text-primary'
                  : 'bg-white border-gray-300 text-gray-500'
                }
                ${isStepClickable(step.id) 
                  ? 'cursor-pointer hover:bg-primary/10' 
                  : 'cursor-not-allowed'
                }
              `}
              aria-label={`步骤 ${step.id}: ${step.title}`}
            >
              <span className="text-sm font-medium">{step.id}</span>
            </button>
            
            {/* 步骤标题 */}
            <span className={`mt-2 text-sm font-medium ${
              isStepCurrent(step.id) 
                ? 'text-primary' 
                : isStepCompleted(step.id)
                ? 'text-gray-900'
                : 'text-gray-500'
            }`}>
              {step.title}
            </span>
          </div>

          {/* 连接线 */}
          {index < stepConfig.length - 1 && (
            <div className="flex-1 h-[1px] mx-2 bg-gray-300" />
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

export default StepIndicator;
